<template>
  <div class="setting-public-view">
    <div class="setting-view-wrap">
      <!--start 系统设置左侧导航 -->
      <div class="setting-nav-bar">
        <div class="setting-menu"> 
          <div class="setting-menu-title">{{nav.title}}</div>
          <div :class="['setting-menu-item', current === item.type && 'setting-menu-item-checked']" v-for="item in navData.list" :key="item.type" @click="onTab(item)">
            <div class="setting-menu-item-icon">
              <i class="iconfont menu-icon" :class="item.icon"></i>
            </div>
            <span class="setting-menu-item-text"> {{item.name}}</span>
          </div>
        </div>
      </div>
      <!--end 系统设置左侧导航 -->

      <div class="setting-view-main" :class="viewClass">
        <slot></slot>
        <!-- <slot name="main"></slot> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'setting-public-view',
  props: {
    current: String,
    nav:{
      type:Object,
      default: () => ({})
    },
    viewClass:{
      type:String,
      default: ''
    },
    initData: {
      type: Object,
      default: () => ({}),
    }
  },
  data(){
    return {
      
    }
  },
  computed: {
    aiReport(){
      return this.initData?.aiReport;
    },
    navData(){
      if(this.aiReport === false){
        const nav = this.nav;
        nav.list = nav.list.filter(x => x.type !== 'report');
        return nav;
      }

      return this.nav;
    }
  },
  methods: {
    onTab(item) {
      window.location.href = item.url;
    }
  },
  mounted() {
  },
}
</script>
<style lang="scss">
.setting-box-warp{
  display: flex;
  flex-flow: wrap;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-right: 12px;
  .setting-box:first-child{
    margin-top: 0px;
  }
}
.setting-box{
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  margin-top: 12px;
  width: 100%;
  padding-bottom: 15px;
  //box-shadow: 0 1px 1px rgb(0,0,0,0.1);
  .no-padding {
    padding: 0 !important;
  }
  label{
    margin-bottom: 0px;
  }
  p{
    margin: 0px;
    padding: 0px;
  }
  .box-title{
    padding: 0 15px;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    p{
      font-weight: bold;
      color: #333333FF;
    }
  }
  .box-body {
    padding:0px 15px;
    &.no-padding{
      padding: 0px;
    }
    .box-item{
      margin-top:20px;
      .item-title{
        font-size: 14px;
        font-weight: bold;
        line-height: 18px;
      }
      .item-text{
        font-size: 12px;
        line-height: 28px;
        margin-top: 5px;
      }
      .item-table{
        margin-top:10px;
      }
      .item-tag{
        display:inline-block;
        background: #F5F5F5FF;
        padding: 1px 10px;
        color: #595959FF;
        margin-right: 12px;
        border-radius: 4px;
        line-height: 23px;
      }
      .item-text-center{
        text-align: center;
      }
      .item-buttom-text{
        color: rgb(85, 183, 180);
      }
      .item-input-num{
        width: 52px;
        margin: 0 3px;
      }
      .item-checkbox{
        font-size: 12px;
        .el-checkbox__label{
          font-size: 12px;
        }
      }
      .item-image-viewer{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
        &>div{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 10;
          background: rgba(0,0,0,0.3);
        }
        &>img{
          width: 95%;
          margin: 30px auto;
          position: relative;
          z-index: 12;
          display: block;
        }
      }
      .item-text-ellipsis{
        overflow: hidden;
        display: inline-block; 
        text-overflow: ellipsis; 
        white-space: nowrap; 
        cursor: pointer;
        width: auto;
        max-width: 100%;
      }
      .el-select{
        width: 100%;
      }
    }
    .item-message{
      font-size: 14px;
      line-height: 20px;
    }
  }
  .item-checkbox-box{
    .item-checkbox-all{
      background-color: rgb(238, 238, 238);
      padding: 10px;
      margin-bottom: 10px;
      .el-checkbox{
        margin: 0px;
      }
    }
    .item-checkbox-list{
      padding: 0px 10px;
      overflow: hidden;
      li{
        width: 25%;
        margin-top: 10px;
        float: left;
      }
      .el-checkbox{
        margin: 0px;
        &>span{
          float: left;
          line-height: 14px;
          padding: 2px 0px;
        }
        .el-checkbox__label{
          max-width: 140px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left:2px;
        }
      }
    }
  }
}

.setting-public-dialog{
  .modal_box{
    .open-data {
      margin-right: 0;
    }
    padding:10px 20px;
    label{
      margin-bottom: 0px;
    }
    &>p{
      font-size: 12px;
      line-height: 16px;
      margin: 0px 0px 10px;
    }
    &>div>p{
      font-size: 12px;
      line-height: 16px;
      margin: 0px 0px 10px;
    }
    textarea{
      font-size: 12px;
      width: 100%; 
    } 
    .text-maxlength{
      margin: 0px;
      margin-top: 3px;
      text-align: right;
      span{
        color: #04BE02;
      }
    }
    .el-select{
      width: 100%;
    }
    .el-cascader{
      width:100%;
    }   
    // &.modal_dispatch{
    //   p{
    //     font-size: 14px;
    //   }
    // }  
    .parmes-select-box{
      overflow: hidden;
      p,.el-select{
        margin-bottom: 5px;
        float: left;
        line-height: 28px;
      }
      .el-select{
        width: 100%;
      }
    }
  }
}
.el-cascader-panel{
  .el-checkbox{
    margin:0px;
  }
}

.el-cascader-menu__item{
  padding-right: 40px;
  div{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
}
.el-form-item--small.el-form-item .el-radio-group label{
  line-height: 32px;
}
.setting—box-multiple{
  margin-top: 10px;
  // position: relative;
  display: flex;
  .multiple-select{
    width: 100%;
  }
  .multiple-save{
    margin-left: 12px;
    // position: absolute;
    // top: 0;
    // left: 100%;
    // z-index: 10;
    // margin-left: 10px;
  }
  .multiple-message{
    line-height: 20px;
    font-size: 12px;
    color: #E6A23C;
  }
}
.setting-addList-btn{
  width: 100%;
  margin-top: 10px;
}
.setting-table-addBtn{
  float: right;
  margin-left: 5px;
  padding: 0 10px!important;
  line-height: 26px;
  height: 26px;
  font-size: 12px;
}

.setting—box-switch{
  // margin-top:10px;
  float: right;
}
.balance-setting-btn{
  padding: 0 5px;
  line-height: 20px;
  margin-right: 10px;
  float: right;
}
 .el-cascader-node > .el-radio{
  //  margin-top: 8px;
 }       
.item-form{
  padding-top:15px;
  .el-form-item--small.el-form-item{
    margin-bottom: 10px;
  }
}
</style>
<style lang="scss" scoped>
.setting-public-view{
  box-sizing: border-box;
  position: relative;
  height: 100vh;
  max-width: 100vw;
  padding: 12px 0 12px 12px;
  // padding: 12px;
  overflow: auto;
}
  .setting-view-wrap{
    display: flex;
    height: 100%;
  }
  .setting-view-main{
    padding-top: 0;
    border-radius: 4px;
    box-sizing: border-box;
    flex: 1;
    // margin-left: 12px;
    height: 100%;
    overflow: hidden;
    &.setting-view-main2{
      padding-right:12px;
    }
    &.setting-view-main3{
      overflow-y: auto;
    }
  }
  .setting-nav-bar{
    display: none;
    overflow: hidden;
    position: sticky;
    box-sizing: border-box;
    border-radius: 4px;
    background: #fff;
    width: 194px;
    min-width: 194px;
    height: 100%;
    top: 0px;
    .setting-menu {
      box-sizing: border-box;
      border-radius: 3px;
      background: #fff;
      width: 194px;
      min-width: 194px;
      overflow: hidden;
      position: sticky;
      font-family: PingFangSC-Medium,PingFang SC;
      &-title {
        padding: 0 16px;
        line-height: 48px;
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        color: #262626 ;
      }
      &-item {
        padding: 0 16px;
        font-size: 14px;
        font-weight: 400;
        color: #595959 ;
        line-height: 40px;
        text-decoration: none;
        font-family: PingFangSC-Regular, "PingFang SC";
        cursor: pointer;
        display: flex;
        align-items: center;
        &:hover{
          background-color: #0000000a;
        }
        &-checked {
          background-color: $color-primary-light-1;
          color: $color-primary;;
        }
        &-icon {
          margin-right: 10px;
          height: 40px;
          .iconfont {
            font-size: 16px;
          }
        }
        &-text {
          font-weight: 500;
      }
    }
  }
}


// transtion
.flip-list-move {
  transition: transform 0.5s;
}
</style>